import React, { useState, useEffect } from "react";
import { getPeriodicalstage } from "../../../components/api";
import { useParams, useLocation, useNavigate, NavLink } from "react-router-dom";
// import qs from "querystring"
import style from "./dateList.module.css";
const { content } = style;
interface Iperiodicallist {
  name: string;
  img: string;
  id: number;
  [propName: string]: any;
}
export default function Periodical() {
  const navigate = useNavigate();
  const { id, name }: any = useParams();
  // const aaa = useLocation()
  // console.log(aaa,useLocation().search)
  let [periodicalList, setPeriodicallist] = useState<Iperiodicallist[]>([]);
  const getperiodicalList = async () => {
    let res = await getPeriodicalstage(id);
    // console.log(res,'Periodicalstage')
    setPeriodicallist(res.data[0].works);
    // console.log(res.data[0].works,'666')
  };
  const back = () => {
    // console.log(666);
    navigate("/date");
  };
  useEffect(() => {
    getperiodicalList();
  }, []);
  return (
    <div>
      <div className={content}>
        <h1>
          <span onClick={() => back()}>&lt;</span>
          {name}{" "}
        </h1>
        {periodicalList.map((item: any) => (
          <NavLink key={item.book_id} to={'/bookdetail/' + item.book_id}>
            <section key={item.book_id}>
            <img src={item.book_img} alt="" />
            <p>{item.book_name}</p>
          </section>
          </NavLink>
        ))}
      </div>
    </div>
  );
}
